<template>
  <transition name="fade">
    <div v-if="loading" class="loading-wrapper" :class="{ dark: isDark }">
      <n-spin size="large">
        <template #description>
          <span class="loading-text">{{ text || loadingText }}</span>
        </template>
      </n-spin>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useLayoutStore } from '@/store/modules/layout'
import { useLoading } from '@/utils/loadingManager'

const layoutStore = useLayoutStore()
const { layout } = storeToRefs(layoutStore)
const { loading, loadingText } = useLoading()

const isDark = computed(() => layout.value.theme === 'dark')

defineProps<{
  text?: string
  background?: string
  textColor?: string
}>()
</script>

<style scoped>
/* HTML: <div class="loader"></div> */
.loader {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  animation: l40 2s infinite;
}
.loader:before {
  content: 'Loading...';
}

@keyframes l40 {
  0%,
  100% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) 0 #000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  9% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000, calc(-6 * var(--w)) 0 #000,
      calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000, calc(-9 * var(--w)) 0 #000;
  }
  18% {
    text-shadow: calc(0 * var(--w)) 0 #000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000,
      calc(-9 * var(--w)) 0 #000;
  }
  27% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) 0 #000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000,
      calc(-9 * var(--w)) 0 #000;
  }
  36% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) 0 #000,
      calc(-9 * var(--w)) 0 #000;
  }
  45% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) 0 #000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) -20px #0000,
      calc(-9 * var(--w)) 0 #000;
  }
  54% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) -20px #0000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) -20px #0000,
      calc(-9 * var(--w)) 0 #000;
  }
  63% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) 0 #000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) -20px #0000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) -20px #0000,
      calc(-9 * var(--w)) -20px #0000;
  }
  72% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) -20px #0000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) -20px #0000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) 0 #000, calc(-8 * var(--w)) -20px #0000,
      calc(-9 * var(--w)) -20px #0000;
  }
  81% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) -20px #0000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) 0 #000, calc(-4 * var(--w)) -20px #0000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) -20px #0000, calc(-8 * var(--w)) -20px #0000,
      calc(-9 * var(--w)) -20px #0000;
  }
  90% {
    text-shadow: calc(0 * var(--w)) -20px #0000, calc(-1 * var(--w)) -20px #0000, calc(-2 * var(--w)) -20px #0000,
      calc(-3 * var(--w)) -20px #0000, calc(-4 * var(--w)) -20px #0000, calc(-5 * var(--w)) -20px #0000,
      calc(-6 * var(--w)) -20px #0000, calc(-7 * var(--w)) -20px #0000, calc(-8 * var(--w)) -20px #0000,
      calc(-9 * var(--w)) -20px #0000;
  }
}
</style>
